<template>
  <div>
    <van-tabbar route active-color="#0c34ba" inactive-color="#646566" :placeholder="true">
      <van-tabbar-item v-for="(tab,index) in tabs" :key="index" :icon="tab.icon" :to="tab.path">
        <span>{{ tab.name }}</span>
        <template #icon="props">
          <img :src="props.active ? tab.inactive : tab.active"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Tabbel",
  data() {
    return {
      tabs: [
        {
          name: "首页",
          path: "/home",
          active: require('@/assets/images/home.png'),
          inactive: require('@/assets/images/home_active.png')
        },
        {
          name: "菜单",
          path: "/menus",
          active: require('@/assets/images/menu.png'),
          inactive: require('@/assets/images/menu_active.png')
        },
        {
          name: "购物袋",
          path: "/shopbag",
          active: require('@/assets/images/shopbag.png'),
          inactive: require('@/assets/images/shopbag_active.png')
        },
        {
          name: "我的",
          path: "/my",
          active: require('@/assets/images/my.png'),
          inactive: require('@/assets/images/my_active.png')
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
